import React, { useState, useEffect } from 'react'
// 所有的 hooks 其实都是函数
function App() {
  const [ proList, setProList ] = useState([])

  // 请求数据 useEffect
  // 内部的第一个参数是一个函数,函数内部可以请求数据 ===> componentDidUpdate
  // useEffect(() => {
  //   fetch('http://121.89.205.189/api/pro/list')
  //     .then(res => res.json())
  //     .then(res => {
  //       console.log(res)
  //       setProList(res.data)
  //     })
  // })
  // useEffect(() => {
  //   function getData () {
  //     fetch('http://121.89.205.189/api/pro/list')
  //       .then(res => res.json())
  //       .then(res => {
  //         console.log(res)
  //         setProList(res.data)
  //       })
  //   }
  //   getData()
  // })
  // 如果代码一直在执行，可以给 useEffect 添加第二个参数，可以设置其为 空数组
  // useEffect(() => {}, [])  =====> componentDidMount
  useEffect(() => {
    fetch('http://121.89.205.189/api/pro/list')
      .then(res => res.json())
      .then(res => {
        console.log(res)
        setProList(res.data)
      })
  }, [])
  return (
    <div>
      {
        proList && proList.map(item => (
          <div key = { item.proid }>{ item.proname }</div>
        ))
      }
    </div>
  )
}

export default App
